<template>
  <!-- 项目入口 -->
  <div class="wh100 entrBg flex_column">
    <div class="topBar flex_between">
      <el-button type="primary" icon="el-icon-plus" @click="showDialog('build', '新增')">新增</el-button>
      <div class="flex_align">
        <el-select class="mr15" v-model="projectId" placeholder="所属项目" clearable @change="getList">
          <el-option v-for="item in projectOptions" :key="item.projectId" :label="item.label" :value="item.projectId">
          </el-option>
        </el-select>

        <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </div>
    </div>
    <div class="flex_1 scrolly">
      <div class="content flex_align flexW">
        <div class="card" v-for="(item,index) in dataInfo" :key="'dataInfo'+index">
          <img class="imgP" :src="item.src?item.src:pics" />
          <div class="row">
            <div class="titleH">{{ item.title }}</div>
            <div class="mt16 text">所属项目：{{item.projectName}}</div>
            <div class="mt10 flex_between">
              <div class="flexS">录入时间：{{ getDay(item.createTime)}}</div>
              <div class="flexS">录入人员：{{ item.creater }}</div>
            </div>
            <div class="flex_between mt16">
              <el-button type="primary" size="small" plain icon="el-icon-search" @click="showDialog('check','项目查看',item.id)">查询</el-button>
              <el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="showDialog('edit','项目查看',item.id)">编辑</el-button>
              <el-button type="primary" size="small" plain icon="el-icon-right" @click="showDialog('section',item.route,item.route)">跳转</el-button>
              <el-button type="danger" size="small" plain icon="el-icon-delete-solid" @click="showDialog('delete','删除',item.id)">删除</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
</template>
<script>
import projectEntrance from '@/api/buss/projectEntrance.js'
import msgUtil from '@/utils/msgUtil'
import Detail from './entrace-detail.vue'
export default {
  components: {
    Detail
  },
  data() {
    return {
      pics: require('@/assets/images/homePage/project1.png'),//默认图片
      projectId: '',
      projectOptions: [],
      postDetailData: {
        show: false,
        type: 'build',
      },
      dataInfo: [
        // {
        //   img: '',
        //   title: '柯桥建设城市道路改建工程',
        //   project: '改建项目',
        //   createTime: '2022年10月11日',
        //   people: '余青峰'
        // }
      ]
    }
  },
  computed: {

  },
  created() {
    this.getProjectList()
    this.getList()
  },
  methods: {
    getList(val) {
      let queryData = { projectId: this.projectId }
      projectEntrance.getList(queryData).then(async res => {
        let { data, message, status } = res
        if (status === 1) {
          this.dataInfo = data.content
          for (let i = 0; i < this.dataInfo.length; i++) {
            let obj = this.dataInfo[i]
            this.$set(this.dataInfo[i], 'src', await this.getImgSrc(obj.id))
          }
        } else {
          this.$messageError(message)
          return false
        }
      })
    },
    getProjectList() {
      projectEntrance.getProjectList().then(res => {
        let { status, message, data } = res
        if (status == 1) {
          this.projectOptions = data.map(e => {
            return { label: e.proName, projectId: e.projectId, value: `${e.proName}|${e.projectId}` }
          })
        } else {
          this.$messageError(message)
          return false
        }
      })
    },
    showDialog(type, typeName, detailId) {
      switch (type) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
          }
          break
        case 'edit':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'check':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据以及关联的标段、合同?').then(res => {
            let param = { ids: [detailId] }
            projectEntrance.del(param).then(res => {
              if (res.status === 1) {
                msgUtil.success2('删除成功!')
                this.getList()
              } else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break
        case 'section':
          if (typeName) {
            if (typeName.indexOf('http') !== -1 || typeName.indexOf('www') !== -1) {
              window.open(typeName, '_blank')
            } else {
              const rData = this.$router.resolve({ path: typeName, query: { id: detailId } })
              window.open(rData.href, '_blank')
            }
          }
          else { msgUtil.error2('无路由数据') }
          break
      }
    },
    getDay(day) {
      if (day) {
        let a = day.split(' ')[0].split('-')
        return a[0] + '年' + a[1] + '月' + a[2] + '日'
      } else {
        return ''
      }
    },
    getImgSrc(id) {
      let url = this.pics
      return new Promise((resolve, reject) => {
        this.$publicUpload.getFile('projectEntrance', id, 'one').then(res => {
          let { code, data, msg } = res
          if (code == 200 && data.length > 0) {
            if (process.env.NODE_ENV == 'development') {
              url = `${process.env.VUE_APP_BASE_API}api/file-server/file/download?id=` + data[0].id
            } else {
              url = `${process.env.VUE_APP_BASE_API}/file-server/file/download?id=` + data[0].id
            }

          }
          resolve(url)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/homepage.scss";
.entrBg {
  background-color: white;
  border-radius: 15px;
  padding: 0 24px;
  box-sizing: border-box;
}
.topBar {
  height: 80px;
  ::v-deep .el-button--primary {
    background-color: #0076ff;
    border-color: #0076ff;
  }
}
.card {
  width: calc((100% - 25px * 4 - 2px) / 5);
  border: 1px solid #cbcbcb;
  border-radius: 8px;
  margin-bottom: 40px;
  margin-right: 25px;
  &:nth-child(5n) {
    margin-right: 0;
  }
  .imgP {
    display: block;
    width: 100%;
    height: 160px;
    border-radius: 8px;
  }
  .row {
    font-size: 13px;
    color: black;
    padding: 0 15px 15px;
  }
  .titleH {
    height: 38px;
    font-size: 15px;
    line-height: 38px;
    font-weight: bold;
    border-bottom: 1px solid #e3e3e3;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt16 {
    margin-top: 16px;
  }
  .mt21 {
    margin-top: 21px;
  }
  ::v-deep .el-button + .el-button {
    margin-left: 0;
  }
  ::v-deep {
    .el-button--small {
      padding: 0.421vw 0.725vw;
      font-size: 12px;
      border-radius: 3px;
    }
    .el-button {
      border-radius: 5px;
    }
    .is-plain {
      background: rgba(73, 138, 234, 0.17);
      color: #0076ff;
      border-color: #0076ff;
    }
    .is-plain:hover {
      background: #0076ff;
      border-color: #0076ff;
      color: white;
    }
    .is-plain:focus {
      background: #e8f4ff;
      color: #0076ff;
      border-color: #a3d3ff;
    }
    .el-button--danger {
      background: RGBA(252, 233, 233, 1);
      color: rgba(247, 47, 47, 1);
      border-color: rgba(234, 52, 52, 1);
    }
    .el-button--danger:hover {
      background: rgba(247, 47, 47, 1);
      color: white;
      border-color: rgba(234, 52, 52, 1);
    }
    .el-button--danger.is-plain:focus {
      background: RGBA(252, 233, 233, 1);
      color: rgba(247, 47, 47, 1);
      border-color: rgba(234, 52, 52, 1);
    }
  }
}
</style>
